<!-- src/components/TabBar.vue -->
<template>
  <div class="tab-bar">
    <el-tag
      v-for="tab in tabStore.tabs"
      :key="tab.fullPath"
      :closable="tab.fullPath !== '/index'"
      :type="tab.fullPath === tabStore.activeTab ? 'primary' : 'info'"
      @click="router.push(tab.fullPath)"
      @close="tabStore.closeTab(tab.fullPath)"
    >
      {{ tab.title }}
    </el-tag>

    <el-button
      v-if="tabStore.tabs.length > 1"
      type="danger"
      size="small"
      @click="tabStore.closeAll"
    >
      全部关闭
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useTabStore } from '@/store/tabs'

const router = useRouter()
const tabStore = useTabStore()
</script>

<style scoped>
.tab-bar {
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  gap: 6px;
  align-items: center;
}
</style>